<template>
    <div style="display: flex;">
        <!-- 创建id为C的容器 -->
        <div id="C" style="width: calc(100vw/4);height: calc(100vh/3);"></div>
        <div id="C1" style="width: calc(100vw/4);height:calc(100vh/3);"></div>
        <div id="C2" style="width: calc(100vw/4);height:calc(100vh/3);"></div>
        <div id="C3" style="width: calc(100vw/4);height:calc(100vh/3);"></div>
    </div>
</template>

<script >
export default {
    data() {
        return {
            Clist: []
        }
    },
    methods: {
        initEcharts() {
            const ids = ['C', 'C1', 'C2', 'C3']
            const elements = []
            ids.forEach(id => {
                const element = document.getElementById(id);
                elements.push(element);
            })
            console.log(elements);
            //
            const seriesdata = []
            for (let i = 0; i < this.Clist.length; i++) {
                let item = this.Clist[i]
                console.log(item);
                let data =
                {
                    // name: "北京",
                    type: 'pie',
                    radius: ['60%', '70%'],
                    // avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'inside',
                        // formatter: '90%',
                    },

                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 30,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: true
                    },
                    data: [
                        {
                            value: item.zb,
                            itemStyle: {
                                color: "#e2d849"
                            },
                            label: {
                                show: true,
                                position: 'center',
                                formatter: item.areas + item.zb + '%',
                                fontSize: 20,
                                fontWeight: 'bold'
                            },
                        },
                        {
                            value: (100 - item.zb),
                            itemStyle: {

                            },
                        },
                    ]

                }
                seriesdata.push(data)
                console.log(seriesdata);
            }
            //            
            elements.forEach((element, index) => {
                const myChart = this.$echarts.init(element);
                myChart.setOption({
                    tooltip: {},
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: seriesdata[index],


                })
                //
            })
        },
        getC() {
            this.$http('/api/cropAreasProportion', 'get').then(res => {
                this.Clist = res
                console.log(res);
                this.initEcharts()
            }).catch(err => {
                console.log(err)
            })
        },
    },
    mounted() {
        this.getC()
    }
}

</script>

<style lang="less" scoped></style>